import React, {forwardRef, useEffect, useState} from "react";
import {Form, Input, Select} from "antd";

const { Option } = Select;
const roleObj= {
    "1": "superAdmin",
    "2": "admin",
    "3": "editor"
};

const UserForm= forwardRef((props, ref) => {
    // console.log(props);
    // console.log(ref);
    const [isDisabled, setIsDisabled]= useState(false);
    useEffect(()=>{
        setIsDisabled(props.isDisabledRegion);
    }, [props.isDisabledRegion])

    const { roleId, region } = JSON.parse(localStorage.getItem('token'));
    const checkRegionDisabled= (item)=>{
        if(props.isUpdate) {  // 更新用户信息
            if(roleObj[roleId]==="superAdmin") {  // 超级管理员
                return false;  // 不禁用
            } else {
                return true;
            }
        } else {  // 添加用户
            if(roleObj[roleId]==="superAdmin") {  // 超级管理员
                return false;  // 不禁用
            } else {
                return item.value !== region;  // 同区域可选，不同区域禁用
            }
        }
    }
    const checkRoleDisabled= (item)=>{
        if(props.isUpdate) {  // 更新用户信息
            if(roleObj[roleId]==="superAdmin") {  // 超级管理员
                return false;  // 不禁用
            } else {
                return true;
            }
        } else {  // 添加用户
            if(roleObj[roleId]==="superAdmin") {  // 超级管理员
                return false;  // 不禁用
            } else {
                return roleObj[item.id] !== "editor";  // 只能选择编辑角色, 其他禁用
            }
        }
    }

    return (
        <Form
            name="basic"
            initialValues={{ remember: true }}
            // onFinish={onFinish}
            // onFinishFailed={onFinishFailed}
            autoComplete="off"
            layout="vertical"
            ref={ ref }
        >
            <Form.Item label="用户名" name="username" rules={[{ required: true, message: '请输入用户名!' }]}>
                <Input />
            </Form.Item>

            <Form.Item label="密码" name="password" rules={[{ required: true, message: '请输入密码!' }]}>
                <Input.Password />
            </Form.Item>

            <Form.Item label="区域" name="region" rules={ isDisabled ? [] : [{ required: true, message: '请选择区域!' }]}>
                <Select disabled={ isDisabled }>
                    {
                        props.regionList.map(region=>(
                            <Option value={region.value}
                                    key={region.id}
                                    disabled={checkRegionDisabled(region)}
                            >
                                {region.title}
                            </Option>
                        ))
                    }
                </Select>
            </Form.Item>

            <Form.Item label="角色" name="roleId" rules={[{ required: true, message: '请选择角色!' }]}>
                <Select onChange={(value)=>{
                    if(value===1) {  // 超级管理员
                        setIsDisabled(true);  // 使区域选项禁用
                        ref.current.setFieldsValue({ region: "" });  // 将区域字段的值清空
                    } else {
                        setIsDisabled(false);
                    }
                }}>
                    {
                        props.roleList.map(role=>(
                            <Option
                                value={role.id}
                                key={role.id}
                                disabled={checkRoleDisabled(role)}
                            >
                                {role.roleName}
                            </Option>
                        ))
                    }
                </Select>
            </Form.Item>
        </Form>
    )
});

export default UserForm;
